<template>
	<view class="personal">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" :title="$t('MerchandiseManagement')"
			:barstyle="colortopic()" Color="#fff"></TopBar>
		<view :class="i18nLocale=='ug'?' ug-from input-from':'input-from'">
			<view class="input-item">
				<view class="title">
					{{$t('ShopugName')}}
				</view>
				<u--input :placeholder="$t('ShopugNamePlaceholder')" fontSize="28rpx" autoBlur border="bottom"
					:adjustPosition='false' v-model="form.ug_name" @blur="changeugblur"></u--input>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('ShopcnName')}}
				</view>
				<u--input :placeholder="$t('ShopcnNamePlaceholder')" fontSize="28rpx" autoBlur border="bottom"
					:adjustPosition='false' v-model="form.cn_name" @blur="changecnblur"></u--input>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('ShopPrice')}}
				</view>
				<u--input :placeholder="$t('ShopPricePlaceholder')" border="bottom" fontSize="28rpx"
					:adjustPosition='false' v-model="form.price"></u--input>
			</view>
			<view class="input-item" @click="changepiker">
				<view class="title">
					{{$t('Category')}}
				</view>
					<view class="" style="direction: ltr;">
						<u-picker :closeOnClickOverlay="true" :show="pickershow" @cancel="pickershow=false" 
							@confirm="changeconfrem" :columns="columns" :keyName="i18nLocale=='ug'?'ug_name':'cn_name'"
							:cancelText="$t('Cancel')" :confirmText="$t('Confirm')" @close="pickershow=false" closeOnClickOverlay></u-picker>
					</view>
				<view class="" style="display: flex;align-items: center;" v-if="columns.length">
					<view class="" v-if="!form.type_id" style="width:90%;color:#999" >{{$t('CategoryPlaceholder')}}</view>
					<view class="" style="width:90%" v-if="form.type_id">{{columns[0].find(item => item.id === form.type_id)?(i18nLocale === 'ug' ? columns[0].find(item => item.id === form.type_id).ug_name : columns[0].find(item => item.id === form.type_id).cn_name):''}}</view>
					<u-icon name="arrow-left" color="#999" size="24" v-if="i18nLocale=='ug'"></u-icon>
					<u-icon name="arrow-right" color="#999" size="24" v-if="i18nLocale=='cn'"></u-icon>
				</view>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('ShopImage')}}
				</view>
				<view class="shop-image" @click="chnagepop">
					<u-icon v-if="!form.shop_image" name="plus" color="#999" size="40"></u-icon>
					<image v-if="form.shop_image" :src="getImgSrc(form.shop_image)" mode=""></image>
				</view>
			</view>
			<view class="input-item" style="display: flex;justify-content: space-between;">
				<view class="title">
					{{$t('ShopType')}}
				</view>
				<view class="" :style="{color:form.status?'#494FB6':colortopic()}">{{form.status? $t('Shelves'):$t('TakenShelves')}}
				</view>
				<view class="" style="direction: ltr;"><u-switch dir="ltr" v-model="form.status" @change="change" :activeColor="colortopic()"  ></u-switch></view>
			</view>
		</view>
		<view class="save-button" @click="changesave">{{$t('Save')}}</view>
		<u-popup :show="popshow" :round="10" mode="bottom" @close="close">
			<view class="my-title">{{$t('PicturesDish')}}</view>
			<scroll-view scroll-y="true" class="myscroll" @scrolltolower="scrolldata">
				<view class="pop-box">
					<view :class="form.shop_image==item.src?'s-image selecet-image':'s-image'"
						v-for="(item,index) in imageList" @click="selecetImage(item)">
						<image :src="getImgSrc(item.src)" mode=""></image>
					</view>
					<Loading style="bottom:5%" :show="loadshow" bgColor="" iconName="circle" text=""></Loading>
				</view>
			</scroll-view>
		</u-popup>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
	</view>
</template>

<script>
	import {
		Translation,
	} from '@/utils/getAddres.js';
	import {
		getcategory,
		postproducts,
		getproductone,
		putproducts,
		getproductsimg
	} from '@/api/shop.js';

	export default {
		data() {
			return {
				pickershow: false,
				fileList1: [],
				form: {
					ug_name: '',
					cn_name: '',
					type_id: '',
					price: '',
					shop_image: '',
					status: true,
				},
				columns: [],
				imageList: [],
				popshow: false,
				pageSize: 12,
				page: 1,
				total: 0,
				to: 1,
				loadshow: false,
				edit_id: '',
				notmessage: '请仔细填写!',

			};
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		onLoad(e) {
			this.getCategory();
			if (e.id) {
				this.edit_id = e.id;
				this.getProductone(e.id);
			}
		},
		methods: {
			changepiker() {
				this.pickershow = true;
			},
			change(e) {
				this.form.status = e;
			},
			changeconfrem(e) {
				this.pickershow = false;
				this.form.type_id = e.value[0].id
			},
			async changeugblur() {
				try {
					if (this.form.cn_name == "" && this.form.ug_name != "") {
						let Trantext = await Translation('uy', this.form.ug_name, 'zh');
						this.form.cn_name = Trantext;
					}
				} catch (error) {
					console.error('Error:', error);
				}

			},
			async changecnblur() {
				try {
					if (this.form.ug_name == "" && this.form.cn_name != "") {
						let Trantext = await Translation('zh', this.form.cn_name, 'uy');

						this.form.ug_name = Trantext;
					}
				} catch (error) {
					console.error('Error:', error);
				}

			},
			//获取产品图片
			getProductsimg() {
				let that = this;
				getproductsimg({
					type: 'product',
					per_page: that.pageSize,
					page: that.page,
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body;
						that.total = data.total;
						that.to = data.to;
						that.page++;
						let mydata = that.imageList.concat(data.data);
						that.imageList = mydata;
						that.loadshow = false;
					}
				})

			},
			//获取修改的菜品
			getProductone(id) {
				let that = this;
				getproductone({
					id: id
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.form.cn_name = data.cn_name
						that.form.ug_name = data.ug_name
						that.form.shop_image = data.cover
						that.form.type_id = data.category_id
						that.form.price = data.price
						that.form.status= data.status
					}
				})
			},
			scrolldata() {
				if (this.to != this.total) {
					this.loadshow = true;
					this.getProductsimg();
				} else {

				}
			},
			//获取分类
			getCategory() {
				let that = this;
				getcategory({}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.columns.push(data)
					}
				})
			},
			close() {
				this.popshow = false
			},
			chnagepop() {
				this.popshow = true;
				this.scrolldata();
			},
			selecetImage(item) {
				this.form.shop_image = item.src;
				this.popshow = false;
			},
			changesave() {
				let that = this;
				if (!that.form.ug_name && !that.form.cn_name && !that.form.price && !that.form.shop_image && !that.form
					.type) {
					that.$refs.uToast.show({
						top: 0,
						message: this.$t('PleaseFillCarefully'),
						color: '#fff',
						bgColor: '#f0ba53'
					})
					return;
				}

				if (that.edit_id) {
					putproducts({
						id: that.edit_id,
						cn_name: that.form.cn_name,
						ug_name: that.form.ug_name,
						cover: that.form.shop_image,
						category_id: that.form.type_id,
						price: that.form.price,
						status:that.form.status
					}).then((res) => {
						if (res.code == 200) {
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('EditSuccessful'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
							uni.navigateBack();
						} else {
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('EditFailed'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						}
					})
				} else {
					postproducts({
						cn_name: that.form.cn_name,
						ug_name: that.form.ug_name,
						cover: that.form.shop_image?that.form.shop_image:'product/default.png',
						category_id: that.form.type_id,
						price: that.form.price,
						status:that.form.status
					}).then((res) => {
						if (res.code == 200) {
							that.tablenumber = '';
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('AdditionSuccessful'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
							uni.navigateBack();
						} else {
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('AdditionFailed'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.personal {
		width: 100%;
		height: 100%;
		height: calc(100% - 100rpx);
		padding: 0rpx 20rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.input-from {
			background-color: #fff;
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			border-radius: $uni-border-radius-lg;
			box-shadow: $uni-bg-shadow;

			.input-item {
				width: 100%;
				// display: flex;
				padding: $uni-spacing-padding-sm;
				box-sizing: border-box;

				input {
					font-size: $uni-font-size-base;

				}

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}

				.shop-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 30rpx;
					border: 2rpx solid #999;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
					}
				}


			}
		}

		.save-button {
			width: 40%;
			margin: 50rpx auto;
			background-color: $uni-color-topic;
			color: #fff;
			font-size: $uni-font-size-lg;
			padding: $uni-spacing-padding-sm 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: $uni-border-radius-lg;
		}

		.my-title {
			text-align: center;
			padding: 20rpx 0rpx;
		}

		.myscroll {
			width: 100%;
			height: 50vh;

			.pop-box {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				row-gap: 40rpx;

				.s-image {
					width: 30%;
					height: 200rpx;
					margin-left: 2.5%;
					border: 3rpx solid #fff;
					border-radius: 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
					}
				}

				.selecet-image {
					border: 3rpx solid ;
					border-radius: 30rpx;
				}
			}
		}

	}

	.ug-from {
		direction: rtl;

		/deep/ .uni-input-input {
			direction: rtl !important;
			text-align: right;
		}

		/deep/ .uni-input-placeholder {
			text-align: right;
		}
	}
</style>